/*
 * 镜面屏的说明书
 * @Author: ljb
 * @Date: 2018-07-20 17:57:26
 * @Last Modified by: ljb
 * @Last Modified time: 2018-08-01 18:04:25
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

	@import '~src/assets/css/common.less';

	.v-instruction-manual-mirror {
		min-height: 100%;
		/*nav的样式*/
		.nav-tabs {
			display: flex;
			width: 100%;
			height: 116*@rem-per-px;
			.nav-item {
				position: relative;
				width: 34%;
				height: 116*@rem-per-px;
				padding: 0 10*@rem-per-px;
				line-height: 116*@rem-per-px;
				text-align: center;
				font-size: 40*@rem-per-px;
				box-sizing: border-box;
				transition: color .3s 0s ease;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				&.en-font {
					font-size: 15*@rem-per-px;
				}
				&::after{
					content: '';
					position:absolute;
					bottom: 0;
					left: 0;
					right: 0;
					height: 2px;
					background-color: #8d3cff;
					transition: transform .3s;
					transform: scale(0);
					transform-origin: 0%;
				}
				&.selected {
					color: #8d3cff;
					&::after {
						transform: scale(1);
					}
				}
				&.right-enter,
				&.left-leave {
					&::after{
						transform-origin: 0%;
					}
				}
				&.left-enter,
				&.right-leave {
					&::after{
						transform-origin: 100%;
					}
				}
			}
		}
		/*nav的样式 END*/
		/*内容展示部分的样式*/
		.content {
			width: 100%;
			font-size: 0;
			& > video {
				width: 100%;
				height: 600*@rem-per-px;
				background-color: #000;
			}
			& > .image {
				width: 100%;
			}
		}
		/*内容展示部分的样式 END*/
	}

</style>
<template>
	<div class="v-instruction-manual-mirror">

		<div class="nav-tabs">
			<div
				v-for="nav in navs"
				:key="nav.value"
				:title="nav.label"
				:class="[
					selected_nav === nav.value ? 'selected' : '' ,
					$i18n.locale === 'en' ? 'en-font' : '' ,
					nav.class,
					'nav-item'
				]"
				@click="selectItem(nav.value)">{{ nav.label }}</div>
		</div>

		<div class="content">
			<video
				:src="resource[selected_nav] ? resource[selected_nav].video : ''"
				preload="meta"
				controls/>
			<img
				:src="cache_images[selected_nav] ? cache_images[selected_nav].src : ''"
				class="image">
		</div>

	</div>
</template>

<script>
export default {
	name: 'MirrorManual',
	data() {
		return {

			navs: [
				{
					value: 1,
					class: '',
					label: this.$t('manual.nav_4'),
				},
				{
					value: 2,
					class: '',
					label: this.$t('manual.nav_1'),
				},
				{
					value: 3,
					class: '',
					label: this.$t('manual.nav_2'),
				},
				{
					value: 4,
					class: '',
					label: this.$t('manual.nav_3'),
				},
			],

			cache_images: {},

			resource: {
				1: {
					video: '//beauty-mirror.gz.bcebos.com/wx_system%2Fmanual%2Fvideo%2F%E9%95%9C%E9%9D%A2%E5%B1%8F-%E5%BC%80%E7%AE%B1.mp4',
					image: '//beauty-mirror.gz.bcebos.com/wx_system%2Fmanual%2Fmirror%2FGraphic_description_glossy_screen_1.png',
				},
				2: {
					video: '//beauty-mirror.gz.bcebos.com/wx_system%2Fmanual%2Fvideo%2F%E9%95%9C%E9%9D%A2%E5%B1%8F-%E5%BC%80%E6%9C%BA.mp4',
					image: '//beauty-mirror.gz.bcebos.com/wx_system%2Fmanual%2Fmirror%2FGraphic_description_glossy_screen_2.png',
				},
				3: {
					video: '//beauty-mirror.gz.bcebos.com/wx_system%2Fmanual%2Fvideo%2F%E8%AF%95%E5%A6%86%E6%95%99%E7%A8%8B.mp4',
					image: '//beauty-mirror.gz.bcebos.com/wx_system%2Fmanual%2Fmirror%2FGraphic_description_glossy_screen_3.png',
				},
				4: {
					video: '//beauty-mirror.gz.bcebos.com/wx_system%2Fmanual%2Fvideo%2F%E9%95%9C%E9%9D%A2%E5%B1%8F-%E6%B5%8B%E8%82%A4%EF%BC%88%E5%9B%BE%E5%83%8F%E5%BC%8F%EF%BC%89.mp4',
					image: '//beauty-mirror.gz.bcebos.com/wx_system%2Fmanual%2Fmirror%2FGraphic_description_glossy_screen_4.png',
				},
			},

			before_nav: 0,

			selected_nav: 0,

		};
	},
	watch: {
		// 监听选中的nav的value值，判断点击的方向，让切换动画变得更加合理
		selected_nav() {
			for (let i = 0; i < this.navs.length; i += 1) {
				const nav = this.navs[i];

				if (this.selected_nav === nav.value) {
					if (this.selected_nav - this.before_nav < 0) {
						const [before_nav] = this.navs.filter(nav => nav.value === this.before_nav);
						nav.class = 'left-enter';
						if (i < this.navs.length - 1) {
							before_nav.class = 'left-leave';
						}
					} else {
						const [before_nav] = this.navs.filter(nav => nav.value === this.before_nav);
						nav.class = 'right-enter';
						if (i >= 1) {
							before_nav.class = 'right-leave';
						}
					}
				}
			}
		},
	},
	mounted() {
		this.selectItem(1);
	},
	methods: {
		/**
		 * 选择nav
		 * @param  {Number} value {选中的nav的value}
		 * @return {undefined}
		 */
		selectItem(value) {
			if (this.selected_nav === value) return;

			this.before_nav = this.selected_nav;
			this.selected_nav = value;

			const current_image = this.resource[this.selected_nav].image;

			const keys = Object.keys(this.cache_images);

			if (!keys || keys.length === 0) {
				this.saveImage(current_image);
			} else {
				for (let i = 0; i < keys.length; i += 1) {
					const key = keys[i];

					if (this.cache_images[key].src !== current_image) {
						this.saveImage(current_image);
					} else {
						break;
					}
				}
			}
		},

		/**
		 * 缓存图片
		 * @param  {String} src {图片地址}
		 * @return {undefined}
		 */
		saveImage(src) {
			const img = new Image();
			img.src = src;
			this.cache_images[this.selected_nav] = img;
		},
	},
};
</script>

